<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌手列表 - QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
    <!-- 引入标题图标 -->
    <link rel="shortcut icon" href="./网站图标.ico" type="image/x-icon">
    <!-- 引入基础公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入内地样式 -->
    <link rel="stylesheet" href="./css/内地.css">
</head>
<body cookie="3" data-id="3">
    <script> document.cookie="3"</script>
     <iframe  id="ifr1" src="../代普/mod_header.html" scrolling="no" frameborder="0"
        style="position: absolute;top:0px; width:100%; z-index:99; height: 250px;display: flex;">
    </iframe>
    <iframe  id="ifr2" src="../代普/guding.html" scrolling="no" frameborder="0"
    style="position: fixed;bottom:0px;right: 0px; width: 100px; z-index:99; height: 250px;display: flex;">
</iframe>
    <div class="main container">
        <div class="tag__list">
            <a href="#" class="active">内地</a>
            <a href="#">港台</a>
            <a href="#">欧美</a>
            <a href="#">韩国</a>
            <a href="#">日本</a>
            <a href="#">其他</a>
        </div>
        <div class="mod_part_detail">
          
          
           
        </div>
    </div>
    <iframe  id="ifr3" src="../郝云奇/dibu.html" scrolling="no" frameborder="0"
    style="position:absolute;bottom:0px; width:100%; z-index:9; height: 626px;display: flex;">
</iframe>
    <script>
      
   

        let obj =[
            {
                src:'./img/内地01.jpg',
                title:'只字不提',
                uname:'于和伟',
                data:'2022-11-29'
            },
            {
                src:'./img/内地02.jpg',
                title:'爱你的疯子',
                uname:'菲菲公主',
                data:'2022-11-29'
            },
            {
                src:'./img/内地03.jpg',
                title:'你不知道',
                uname:'司南',
                data:'2022-11-29'
            },
            {
                src:'./img/内地04.jpg',
                title:'恒星燃烧',
                uname:'杠上花',
                data:'2022-11-29'
            },
            {
                src:'./img/内地05.jpg',
                title:'「今天几分糖」Vol.1',
                uname:'赵让 /陈宥维 /傅菁',
                data:'2022-11-29'
            },
            {
                src:'./img/内地06.jpg',
                title:'毕业记',
                uname:'Lil Ghost小鬼 /张碧晨',
                data:'2022-11-29'
            },
            {
                src:'./img/内地07.jpg',
                title:'你还记得我的模样吗',
                uname:'袁成杰',
                data:'2022-11-29'
            },
            {
                src:'./img/内地08.jpg',
                title:'星河无边',
                uname:'袁娅维TIA RAY',
                data:'2022-11-29'
            },
            {
                src:'./img/内地09.jpg',
                title:'有个人爱你很久',
                uname:'慕容晓晓',
                data:'2022-11-29'
            },
            {
                src:'./img/内地10.jpg',
                title:'最后一次的温柔',
                uname:'颜王词秀',
                data:'2022-11-29'
            },
            {
                src:'./img/内地11.jpg',
                title:'黑白风景（QQ音乐×霓雾娱乐《自在佗佻》岭南音乐合辑先行曲）',
                uname:'沙漏SAALAU',
                data:'2022-11-29'
            },
            {
                src:'./img/内地12.jpg',
                title:'梦中人',
                uname:'李林烁',
                data:'2022-11-29'
            },{
                src:'./img/内地13.jpg',
                title:'请陪我说说话',
                uname:'杨璐玮',
                data:'2022-11-29'
            },{
                src:'./img/内地14.jpg',
                title:'伪球迷的春天',
                uname:'阿拉梅',
                data:'2022-11-29'
            },{
                src:'./img/内地15.jpg',
                title:'熬粥',
                uname:'刘锦泽',
                data:'2022-11-29'
            },
        ]
    const mod_part_detail =    document.querySelector('.mod_part_detail')
        
    function fn(){
        let s = ''
            for(let i = 0;i < obj.length;i++){
            const n = Math.floor(Math.random() * obj.length)
            
            // console.log(n);
          s +=`  <div class="items">
        <div class="box">
             <a href="#" class="img">
            <img src="${obj[n].src}" alt="">
        </a>
        </div>
       

        <h4><a href="#">${obj[n].title}</a></h4>
        <p><a href="#">${obj[n].uname}</a></p>
        <span>${obj[n].data}</span>
    </div>`
    }
    mod_part_detail.innerHTML = s
        }
        fn()
       
        const as = document.querySelectorAll('.tag__list a')
        // console.log(as);
        // 遍历,找到as里面所有的a
        for(let i = 0;i < as.length;i++){
            // 给as里面的每个a添加点击事件
            as[i].addEventListener('click',function(e){
                document.querySelector('.active').classList.remove('active')
                as[i].classList.add('active')
                // e.preventDefault()
                fn()
            })
        }

        let tiaozhuan=document.querySelectorAll(".img")
        for(let i=0;i<tiaozhuan.length;i++){
            tiaozhuan[i].addEventListener("click",()=>{
                window.location.href="./代普/musicPlay.html"
            })
        }
    </script>
<script src="../代普/js/ifr.js"></script>

</body>
</html>